<template>
	<div class="msite_shop_list">
		<div class="shop_header">
			<i class="iconfont icon-xuanxiang"></i>
			<span class="shop_header_title">附近商家</span>
		</div>
		<div class="shop_container">
			<ul class="shop_list" v-if="shops.length">
				<li class="shop_li border-1px" v-for="(shopObj) in shops" @click="$router.push('/shop')" :key="shopObj.id">
					<a>
						<div class="shop_left">
							<img class="shop_img" :src="baseImageUrl + shopObj.image_path">
						</div>
						<div class="shop_right">
							<section class="shop_detail_header">
								<h4 class="shop_title ellipsis">{{shopObj.name}}</h4>
								<ul class="shop_detail_ul">
									<li class="supports" v-for="(name) in shopObj.supports">{{name.icon_name}}</li>
								</ul>
							</section>
							<section class="shop_rating_order">
								<section class="shop_rating_order_left">
									<!-- 星星组件 size: image Size -->
									<Star :score="shopObj.rating" :size="24"/>
									<div class="rating_section">
										{{shopObj.rating}}
									</div>
									<div class="order_section">
										月售{{shopObj.recent_order_num}}单
									</div>
								</section>
								<section class="shop_rating_order_right">
									<span class="delivery_style delivery_right">硅谷专送</span>
								</section>
							</section>
							<section class="shop_distance">
								<p class="shop_delivery_msg">
									<span>¥{{shopObj.float_minimum_order_amount}}起送</span>
									<span class="segmentation">/</span>
									<span>配送费约¥{{shopObj.float_delivery_fee}}</span>
								</p>
							</section>
						</div>
					</a>
				</li>
				
				</li>
			</ul>
			<ul v-else>
				<li v-for="item in 6">
					<img src="./images/shop_back.svg" alt="back">
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import Star from '../start/index.vue'
	export default{
		name:'ShopLists',
		components:{
			Star
		},
		data(){
			return{
				baseImageUrl:'http://cangdu.org:8001/img/'
			}
		},
		created(){
		   this.$store.dispatch('SETSHOPS',{
				longitude:'113.3123526',
				latitude:'22.8202681'
			})
		},
		computed:{
			...mapState(['shops'])
		}
	}
</script>

<style lang="stylus">
	#app .content>div>section.msite .msite_shop_list {
		position: relative;
		margin-top: 10px;
		background: #fff;
	}
	
	#app .content>div>section.msite .msite_shop_list::before {
		content: '';
		position: absolute;
		z-index: 200;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		background-color: #e4e4e4;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_header {
		padding: 10px 10px 0;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_header .shop_icon {
		margin-left: 5px;
		color: #999;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_header .shop_header_title {
		color: #999;
		font-size: 14px;
		line-height: 20px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container {
		padding-bottom: 50px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li {
		position: relative;
		width: 100%;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li::before {
		content: '';
		position: absolute;
		z-index: 200;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: #f1f1f1;
		transform: scaleY(0.5);
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a {
		*zoom: 1;
		display: block;
		box-sizing: border-box;
		padding: 15px 8px;
		width: 100%;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a::after {
		content: '';
		display: block;
		clear: both;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_left {
		float: left;
		box-sizing: border-box;
		width: 23%;
		height: 75px;
		padding-right: 10px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_left .shop_img {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right {
		float: right;
		width: 77%;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_detail_header {
		*zoom: 1;
		width: 100%;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_detail_header::after {
		content: '';
		display: block;
		clear: both;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_detail_header .shop_title {
		float: left;
		width: 140px;
		color: #333;
		font-size: 16px;
		line-height: 16px;
		font-weight: 700;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_detail_header .shop_title::before {
		content: '品牌';
		display: inline-block;
		font-size: 11px;
		line-height: 11px;
		color: #333;
		background-color: #ffd930;
		padding: 2px 2px;
		border-radius: 2px;
		margin-right: 5px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_detail_header .shop_detail_ul {
		float: right;
		margin-top: 3px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_detail_header .shop_detail_ul .supports {
		float: left;
		font-size: 10px;
		color: #999;
		border: 1px solid #f1f1f1;
		padding: 0 2px;
		border-radius: 2px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order {
		*zoom: 1;
		width: 100%;
		margin-top: 18px;
		margin-bottom: 8px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order::after {
		content: '';
		display: block;
		clear: both;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left {
		float: left;
		color: #ff9a0d;
	}
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star {
	// 	float: left;
	// 	font-size: 0;
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star .star-item {
	// 	display: inline-block;
	// 	background-repeat: no-repeat;
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-48 .star-item {
	// 	width: 20px;
	// 	height: 20px;
	// 	margin-right: 22px;
	// 	background-size: 20px 20px;
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-48 .star-item:last-child {
	// 	margin-right: 0;
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-48 .star-item.on {
	// 	background-image: url("./images/stars/star48_on@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-48 .star-item.on {
	// 		background-image: url("./images/stars/star48_on@3x.png");
	// 	}
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-48 .star-item.half {
	// 	background-image: url("./images/stars/star48_half@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-48 .star-item.half {
	// 		background-image: url("./images/stars/star48_half@3x.png");
	// 	}
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-48 .star-item.off {
	// 	background-image: url("./images/stars/star48_off@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-48 .star-item.off {
	// 		background-image: url("./images/stars/star48_off@3x.png");
	// 	}
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-36 .star-item {
	// 	width: 15px;
	// 	height: 15px;
	// 	margin-right: 6px;
	// 	background-size: 15px 15px;
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-36 .star-item:last-child {
	// 	margin-right: 0;
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-36 .star-item.on {
	// 	background-image: url("./images/stars/star36_on@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-36 .star-item.on {
	// 		background-image: url("./images/stars/star36_on@3x.png");
	// 	}
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-36 .star-item.half {
	// 	background-image: url("./images/stars/star36_half@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-36 .star-item.half {
	// 		background-image: url("./images/stars/star36_half@3x.png");
	// 	}
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-36 .star-item.off {
	// 	background-image: url("./images/stars/star36_off@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-36 .star-item.off {
	// 		background-image: url("./images/stars/star36_off@3x.png");
	// 	}
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-24 .star-item {
	// 	width: 10px;
	// 	height: 10px;
	// 	margin-right: 3px;
	// 	background-size: 10px 10px;
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-24 .star-item:last-child {
	// 	margin-right: 0;
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-24 .star-item.on {
	// 	background-image: url("./images/stars/star24_on@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-24 .star-item.on {
	// 		background-image: url("./images/stars/star24_on@3x.png");
	// 	}
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-24 .star-item.half {
	// 	background-image: url("./images/stars/star24_half@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-24 .star-item.half {
	// 		background-image: url("./images/stars/star24_half@3x.png");
	// 	}
	// }
	
	// #app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-24 .star-item.off {
	// 	background-image: url("./images/stars/star24_off@2x.png");
	// }
	
	// @media (-webkit-min-device-pixel-ratio: 3),
	// (min-device-pixel-ratio: 3) {
	// 	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .star.star-24 .star-item.off {
	// 		background-image: url("./images/stars/star24_off@3x.png");
	// 	}
	// }
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .rating_section {
		float: left;
		font-size: 10px;
		color: #ff6000;
		margin-left: 4px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_left .order_section {
		float: left;
		font-size: 10px;
		color: #666;
		transform: scale(0.8);
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_right {
		float: right;
		font-size: 0;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_right .delivery_style {
		transform-origin: 35px 0;
		transform: scale(0.7);
		display: inline-block;
		font-size: 12px;
		padding: 1px;
		border-radius: 2px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_right .delivery_left {
		color: #fff;
		margin-right: -10px;
		background-color: #02a774;
		border: 1px solid #02a774;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_rating_order .shop_rating_order_right .delivery_right {
		color: #02a774;
		border: 1px solid #02a774;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_distance {
		*zoom: 1;
		width: 100%;
		font-size: 12px;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_distance::after {
		content: '';
		display: block;
		clear: both;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_distance .shop_delivery_msg {
		float: left;
		transform-origin: 0;
		transform: scale(0.9);
		color: #666;
	}
	
	#app .content>div>section.msite .msite_shop_list .shop_container .shop_list .shop_li>a .shop_right .shop_distance .segmentation {
		color: #ccc;
	}
</style>